<template>
  <div v-loading="loading" class="content-body">
    <iframe v-if="url" class="dialog-iframe" :src="`/static/plugins/pdf/web/viewer.html?file=${url}`" />
  </div>
</template>

<script>
import { queryEntity, queryGuestEntity } from '@/api/portal/manager/analysis/index'
import { getToken } from '@/utils/auth'
export default {
  name: 'LiveBosEntityV2',
  props: {
    params: {
      type: Array
    },
    temp: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      loading: false,
      tid: null, // 模版主键
      query: null,
      setting: null,
      entity: { },
      url: null,
      doc: require('@/assets/images/doc.png'),
      eps: require('@/assets/images/eps.png'),
      excel: require('@/assets/images/excel.png'),
      gif: require('@/assets/images/gif.png'),
      pdf: require('@/assets/images/pdf.png'),
      ppt: require('@/assets/images/ppt.png'),
      txt: require('@/assets/images/txt.png'),
      zip: require('@/assets/images/zip.png')
    }
  },
  watch: {
    temp: {
      handler(newName, oldName) {
        if (undefined !== newName.pzx) {
          this.setting = JSON.parse(newName.pzx)
        }
        this.tid = newName.id
        this.query = this.params
        this.initObject()
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    initObject() {
      const params = { tid: this.tid }
      if (this.query !== null && this.query.length > 0) {
        this.query.forEach(item => {
          params[item.code] = item.value
        })
      }
      this.loading = true
      if (getToken()) {
        queryEntity(params).then(res => {
          const { data } = res
          this.entity = data
          this.url = encodeURIComponent(this.entity.url)
          this.loading = false
        }).catch(() => {
          console.log(1)
          this.loading = false
        })
      } else {
        queryGuestEntity(params).then(res => {
          const { data } = res
          this.entity = data
          this.url = encodeURIComponent(this.entity.url)
          this.loading = false
        }).catch(() => {
          console.log(1)
          this.loading = false
        })
      }
    }
  }
}
</script>
<style scoped>
.content-body {
  width: 100%;
  height: 100%;
  padding: 0px 15px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
  min-height: 50rem;
  position: relative;
}
.dialog-iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  border: 0;
}
</style>
